<template>
  <div>
    <basic-container>
      <avue-crud
        ref="scopeTree"
        :data="tableData"
        :option="option"
        :page="page"
        :destroy-on-close="true"
        @row-save="rowSave"
        @refresh-change="searchHandler"
        @row-del="btnDelete"
        @row-update="rowUpdate"
        @on-load="onLoad"
        @search-change="searchChange"
        @search-reset="searchForm.classId = ''"
      >
        <template slot="menuLeft">
          <el-button
            class="append"
            type="primary"
            icon="el-icon-plus"
            size="small"
            v-show="getPermissions('bedroomLevel_add')"
            @click.stop="rowSave()"
            >新增</el-button
          >
          <el-upload
            class="upload-demo"
            :action="actionurl"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple="false"
            :on-exceed="handleExceed"
            :show-file-list="false"
            :on-success="onSuccess"
            v-show="getPermissions('bedroomLevel_upload')"
          >
            <el-button size="small" type="primary" icon="el-icon-plus"
              >点击上传</el-button
            >
          </el-upload>

          <el-button
            type="danger"
            icon="el-icon-plus"
            size="small"
            @click.stop="download()"
            >下载模板</el-button
          >
        </template>
        <template slot-scope="{ disabled, size }" slot="classIdSearch">
          <el-select
            placeholder="请选择查看班级"
            :disabled="disabled"
            :size="size"
            style="width: 200px"
            v-model="searchForm.classId"
          >
            <el-option
              v-for="item in classDictionary"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.3/lib/index.js"></script>
<script>
import {
  addBedroomLevel,
  getBedroomLevel,
  deleteBedroomLevel,
  updateBedroomLevel
} from "@/api/laborEducation/bedroomLevel";
import { getStore } from "@/util/store";
import { baseUrl } from "@/config/env";
import { searchClass } from "@/api/basicData/class";

export default {
  name: "",
  data() {
    return {
      classDictionary: [],
      page: {
        pageSize: 10,
        total: 10
      },
      headers: {
        Authorization: ""
      },
      actionurl: baseUrl + "/pc/bedroom-level/upload",
      searchForm: {
        currentPage: 1,
        pageSizes: 10,
        classId: "",
      },
      tableData: [],
      option: {
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        editBtn: this.getPermission("bedroomLevel_update"),
        delBtn: this.getPermission("bedroomLevel_delete"),
        addBtn: false,
        viewBtn: this.getPermission("bedroomLevel_get"),
        searchMenuSpan: 6,
        align: "center",
        column: [
          {
            label: "姓名",
            prop: "name",
            display: false,
          },
          {
            label: "学号",
            prop: "studentKey",
            type: "select",
            remote: true,
            props: {
              label: "name",
              value: "studentKey",
            },
            dicUrl: `${baseUrl}/pc/per-student/byName?name={{key}}`,
            hide: true,
            rules: [
              {
                required: true,
                message: "学号不能为空",
                trigger: "blur",
              },
            ],
          },
          {
            label: "学号",
            prop: "studentKeyStr",
            display: false,
          },
          {
            label: "所属班级",
            prop: "classId",
            type: "select",
            hide: true,
            remote: true,
            searchslot: true,
            search: true,
            display: false,
            props: {
              label: "className",
              value: "id",
            },
            dicUrl: `${baseUrl}/pc/stu-class/byName`,
            rules: [
              {
                required: true,
                message: "所属班级不能为空",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属班级",
            prop: "classStr",
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "学期",
            display: false,
            prop: "termId",
            type: "select",
            remote: true,
            props: {
              label: "term",
              value: "id"
            },
            dicUrl: `${baseUrl}/pc/term/all`,
          },
          {
            label: "寝室卫生等级",
            labelWidth:120,
            prop: "level",
            type: "select",
            rules: [
              {
                required: true,
                message: "寝室卫生等级不能为空",
                trigger: "blur"
              }
            ],
            dicData:[
              {
                label: "A等",
                value: 10
              },
              {
                label: "B等",
                value: 20
              },
              {
                label: "C等",
                value: 30
              },
            ]
          },
          {
            label: "备注",
            prop: "remark"
          }
        ]
      }
    };
  },
  created() {
    this.headers.Authorization = getStore({
      name: "token"
    });
    searchClass().then((res) => {
      this.classDictionary = res.data;
      console.log(this.classDictionary[0].id);
      this.searchForm.classId = this.classDictionary[0].id;
      this.searchHandler();
    });
  },
  methods: {
    download(){
        window.location.href= baseUrl+'/image/178e1385f62846539ebb8cbfa214a2bd.xlsx';
    },
    getPermissions(value) {
      return this.getPermission(value);
    },
    searchChange(params, done) {
      console.log(this.searchForm.classId);
      this.searchHandler();
      done();
    },
    searchHandler() {
      if (
        this.searchForm.classId == undefined ||
        this.searchForm.classId == ""
      ) {
        return;
      }
      getBedroomLevel(this.searchForm).then(res => {
        this.page.pageSizes = res.data.pageSizes;
        this.page.total = res.data.total;
        this.tableData = res.data.records;
      });
    },
    onLoad(page) {
      this.searchForm.currentPage = page.currentPage;
      this.searchForm.pageSize = page.pageSize;
      this.searchHandler();
    },
    onSuccess(response) {
      console.log(response);
      if (response.code == 1) {
        this.$message.success("上传成功");
        this.searchHandler();
      } else {
        this.$message({
          type: "info",
          message: "上传成功失败",
        });
      }
    },
    btnDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          console.log(row);
          deleteBedroomLevel([row.id]).then(() => {
            this.$message.success("删除成功");
            this.searchHandler();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    rowUpdate(form, done, loading) {
      loading();
      updateBedroomLevel(form)
        .then(() => {
          this.$message.success("更新成功");
          this.searchHandler();
        })
        .finally(() => {
          done();
        });
    },
    rowSave(form, done, loading) {
      this.$refs.scopeTree.rowAdd();
      loading();
      console.log(form);
      addBedroomLevel(form)
        .then(() => {
          this.$message.success("添加成功");
          this.searchHandler();
        })
        .finally(() => {
          done();
        });
    }
  }
};
</script>

<style>
.upload-demo {
  float: left;
}
.append {
  float: left;
}
</style>
